<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>考核成绩列表</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link href="__PUBLIC__/mobile/css/mui.min.css" rel="stylesheet"/>
    	<link href="__PUBLIC__/mobile/css/sty.css" rel="stylesheet"/>
		<script src="__PUBLIC__/mobile/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body id="body" style="background-color: #fff;">
		<header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	        <h1 class="mui-title">绩效考核概况</h1>
        </header>
		<div class="mui-content">
			<!-- 选中季度和月份分别显示对应的选择框js开始 -->
			<script type="text/javascript">
				function xuanZe(a){
					if (a==1) {
						$(".x-jidu").css("display","inline-block");
						$(".x-month").css("display","none");
					}else if(a==2){
						$(".x-month").css("display","inline-block");
						$(".x-jidu").css("display","none");
					}
				}
				function xuanZe1(b){
					if (b==1) {
						$(".x-jidu1").css("display","inline-block");
						$(".x-month1").css("display","none");
					}else if(b==2){
						$(".x-month1").css("display","inline-block");
						$(".x-jidu1").css("display","none");
					}
				}
			</script>				
			<!-- 成绩 -->
			<div class="xChoseTime">
				<select class="xSeleTime" id="ttt">
					<foreach name="notes10" item="notes">
						<option value="<{$notes['id']}>"><{$notes['table_name']}></option>
					</foreach>
				</select>
				<select class="xSelePeo" id="post">
					<foreach name="posts10" item="posts">
						<option value="<{$posts['posts_id']}>"><{$posts['posts_name']}></option>
					</foreach>
				</select>
				<select class="xSeleMon" onchange="xuanZe1(this.value)">
					<option value="">请选择时间</option>
					<option value="1">季度</option>
					<option value="2">月份</option>
				</select>
				<!-- 按季度查看 开始 -->
				<select name="quarter" id="quarter" class="x-jidu1" style="display: none;">
					<option value="">请选择季度</option>
					<option value="1">第一季度</option>
					<option value="2">第二季度</option>
					<option value="3">第三季度</option>
					<option value="4">第四季度</option>
				</select>
				<!-- 按季度查看 结束 -->
				<!-- 按月份查看 开始 -->
				<select name="month" id="month" class="x-month1" style="display: none;">
					<option value="">请选择月份</option>
					<option value="1">1月</option>
					<option value="2">2月</option>
					<option value="3">3月</option>
					<option value="4">4月</option>
					<option value="5">5月</option>
					<option value="6">6月</option>
					<option value="7">7月</option>
					<option value="8">8月</option>
					<option value="9">9月</option>
					<option value="10">10月</option>
					<option value="11">11月</option>
					<option value="12">12月</option>
				</select>
				<!-- 按月份查看 结束 -->
			</div>
			<div class="card_div">
				<span style="width: 20%;">序号</span>
				<span style="width: 20%;text-align: left;">姓名</span>
				<span style="width: 20%;">总分</span>
				<span style="width: 20%;">分档</span>
			</div>

			<foreach name='score10' key='index' item='item'>
			<div class="content">
				<div class="line">
					<span class="pic"><{$index + '1'}></span>
					<span class="nickname">
						<p class="p1"><{:idtoname('worker_id','worker','worker_name',$item['worker_id'])}></p>
					</span>
					<span class="nub"><{$item.sum}></span>
					<span class="pic"><{$item['dang']}></span>
					<span class="mui-icon mui-icon-arrowdown xIcon"></span>
				</div>
				<table style="width: 100%;" class="xtableList">
					<tr><td colspan="3" style="padding-left: 10%;font-weight: 600;">考核项目</td><td style="font-weight: 600;">分数</td></tr>
					<tr>
						<td class="front"  colspan="3">党建</td><td class="behind"><{$item.public}>分</td>
					</tr>
					<tr>
						<td class="front"  colspan="3">队伍建设</td><td class="behind"><{$item.part}>分</td>
					</tr>
					<tr>
						<td class="front"  colspan="3">宣传报道和舆情应对</td><td class="behind"><{$item.price}>分</td>
					</tr>
					<tr>
						<td class="front"  colspan="3">调研信息、典型案例</td><td class="behind"><{$item.check}>分</td>
					</tr>
					<tr>
						<td class="front"  colspan="3">工作业绩</td><td class="behind"><{$item.work}>分</td>
					</tr>
				</table>
			</div>
			</foreach>
			<script type="text/javascript">
				$('.line').click(function(){
					$(this).siblings('table').toggle();
				});
			</script>
			<!-- 按岗位查看js 开始 -->
			<script type="text/javascript">
			    function huangang(){
			    	var notes_id = $('#ttt').val();
			    	// alert(notes_id);
			    	var posts_id = $('#post').val();
			    	// alert(posts_id);
			    	$.ajax({
			    		url: 'score_list1',
			    		type: 'post',
			    		data: {id:notes_id,posts_id:posts_id},
			    		success:function(mes){
			    			// alert(mes);
			    			$('.content').remove();
			            	$('#aaa').append(mes);
			    		}
			    	});
			    }
			    $('#post').change(function(){
					huangang();
				});
			</script>
			<!-- 按岗位查看js 结束 -->
			
			<!-- 按月份查看js 开始 -->
			<script type="text/javascript">
			    function month(){
			    	var notes_id = $('#ttt').val();
			    	var posts_id = $('#post').val();
			    	var month = $('#month').val();
			    	$.ajax({
			    		url: 'score_list2',
			    		type: 'post',
			    		data: {id:notes_id,posts_id:posts_id,month:month},
			    		success:function(mes){
			    			// console.log(mes);
			    			$('.content').remove();
			            	$('#aaa').remove();
			            	$('#bbb').remove();
			            	$('#ccc').append(mes);
			    		}
			    	});
			    }
			    $('#month').change(function(){
			    	month();
			    });
			</script>
			<!-- 按月份查看js 结束 -->	

			<!-- 按季度查看js 开始 -->
			<script type="text/javascript">
			    function quarter(){
			    	var notes_id = $('#ttt').val();
			    	var posts_id = $('#post').val();
			    	var quarter = $('#quarter').val();
			    	$.ajax({
			    		url: 'score_list3',
			    		type: 'post',
			    		data: {id:notes_id,posts_id:posts_id,quarter:quarter},
			    		success:function(mes){
			    			// alert(mes);
			    			$('.content').remove();
			            	$('#aaa').remove();
			            	$('#bbb').remove();
			            	$('#ccc').append(mes);
			    		}
			    	});
			    }
			    $('#quarter').change(function(){
			    	quarter();
			    });
			</script>
			<!-- 按季度查看js 结束 -->
				
			<div id="aaa"></div>
			<div id="bbb"></div>
			<div id="ccc"></div>
		</div>
		<script type="text/javascript" src="__PUBLIC__/mobile/js/mui.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/admin/js/echarts.min.js"></script>
		<script type="text/javascript">
			var all=$("#allScore").val(); //所有的
			var allS=all.split(",");
			var yuan=$("#yuaneScore").val(); //员额法官
			var yuanS=yuan.split(",");
			var xz=$("#xzScore").val(); //司法行政
			var xzS=xz.split(",");
			var fz=$("#fzScore").val(); //司法辅助
			var fzS=fz.split(",");
			var names=$("#yname").val();//名字
			var namesS=names.split(",");
			var sum=$("#ysum").val();//分数
			var sumS=sum.split(",");
			var pyuan = $("#yuane").val();
			var pyuane = pyuan.split(",");
			var xinz = $("#xinz").val();
			var pxinz = xinz.split(",");
			var fuz = $("#fuz").val();
			var pfuz = fuz.split(",");
			var team1 = $('#team').val();
			var team = team1.split(','); 
			var pb_name = $('#pb_name').val();
			var pb_nameS = pb_name.split(','); 
			var pb_fen = $('#pb_fen').val();
			var pb_fenS = pb_fen.split(','); 
			var monthS =  $('#months').val();
			// 所有部门对比的饼状图
			var allScoreEvent = echarts.init(document.getElementById('allScoreList'));
			var allScoreEventOption = {
				title : {
			        text: '平罗县人民法院所有人成绩分档概况对比',
	//		        subtext: '岗位：所有    成绩：分档   分档：一/二/三/不及格\n',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} {b} :{d}%",
			        textStyle: {
	                    fontSize:13
	                }
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
					top:'8%',
			        data: ['优秀','良好','一般','不及格']
			    },
			    grid: [
			        {x: '7.5%',y: '65%', width: '80%', height: '30%',right:'2%'},
			    ],
			    xAxis: [
			    	{
			    		gridIndex: 0,
			        	type: 'category',
			            axisTick: {
			                alignWithLabel: true
			            },
			            data: ['员额法官','司法行政人员','司法辅助人员']
		            },
			    ],
			    yAxis: [
			        {
		        		gridIndex: 0,
		        		name:'岗位',
		        		show:false,
			        },
			    ],
			    series : [
			        {
			            name: '整体概况',
			            type: 'pie',
			            //roseType:'radius',
			            radius : '45%',
			            center: ['50%', '36%'],
			            color: ['#39CBCA', '#C2D138', '#FFA809', '#E25C36'],
//			            color: ['#6EE3F7', '#FFDC89', '#FEA1C0', '#8AC994'],
			            data:[
			                {value:allS[0], name:'优秀'},
			                {value:allS[1], name:'良好'},
			                {value:allS[2], name:'一般'},
			                {value:allS[3], name:'不及格'},
			            ],
			            label: {
				            normal: {
				                position: 'outside',
				                formatter: '{b} {c}%',
				                 textStyle: {
				                    color: '',
				                    fontSize: 13
				                }
				            }
				        },
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        },
			        {
			            name: '员额法官',
			            type: 'pie',
			            //roseType:'radius',
			            radius : '25%',
			            center: ['30%', '80.2%'],
			            data:[
			                {value:yuanS[0], name:'优秀'},
			                {value:yuanS[1], name:'良好'},
			                {value:yuanS[2], name:'一般'},
			                {value:yuanS[3], name:'不及格'}
			            ],
			            label: {
				            normal: {
				                position: 'outside',
				                formatter: '{b} {c}%',
				                textStyle: {
				                    color: '',
				                    fontSize: 12
				                }
				            }
				        },
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        },
			        {
			            name: '司法行政人员',
			            type: 'pie',
			            radius : '25%',
			            center: ['52%', '81%'],
			            data:[
			                {value:xzS[0], name:'优秀'},
			                {value:xzS[1], name:'良好'},
			                {value:xzS[2], name:'一般'},
			                {value:xzS[3], name:'不及格'}
			            ],
			            label: {
				            normal: {
				                position: 'outside',
				                formatter: '{b} {c}%',
				                 offset: [,100],
				                 textStyle: {
				                    color: '',
				                    fontSize: 12
				                }
				            }
				        },
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        },
			        {
			            name: '司法辅助人员',
			            type: 'pie',
			            //roseType:'radius',
			            radius : '25%',
			            center: ['68%', '81%'],
			            data:[
			                {value:fzS[0], name:'优秀'},
			                {value:fzS[1], name:'良好'},
			                {value:fzS[2], name:'一般'},
			                {value:fzS[3], name:'不及格'}
			            ],
			            label: {
			            normal: {
			                position: 'outside',
			                formatter: '{b} {c}%',
			                 textStyle: {
			                    color: '',
			                    fontSize: 12
			                }
			            }
			        },
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        },

			    ]
			};
			allScoreEvent.setOption(allScoreEventOption);

			//	饼状图
			var cirScoreEvent = echarts.init(document.getElementById('cirScoreList'));
			var cirScoreEventOption = {
			    title : {
			        text: '员额法官绩效考核成绩汇总',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    series : [
			        {
			            name: '分档比例',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '55%'],
//			            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A'],
						color: ['#39CBCA', '#C2D138', '#FFA809', '#E25C36'],
						label: {
				            normal: {
				                position: 'outside',
				                formatter: '{b} : {c}%',
				                textStyle: {
				                    color: '',
				                    fontSize: 14
				                }
				            }
				        },
			            data:[
			                {value:yuanS[0], name:'优秀'},
			                {value:yuanS[1], name:'良好'},
			                {value:yuanS[2], name:'一般'},
			                {value:yuanS[3], name:'不及格'},
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			cirScoreEvent.setOption(cirScoreEventOption);

//			柱状图
			var verScoreEvent = echarts.init(verScoreList);
			var verScoreEventOption = {
			    title: {
			        text: '员额法官绩效考核成绩汇总',
			        x:'center'
			    },
			    tooltip: {
			        trigger: 'axis',
			        formatter: "{b} : {c}分",
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    label:{ 
					normal:{ 
						show: true, 
						formatter: "{c}分",
						position: 'right'
					}
				},
			    grid: {
			        left: '3%',
			        right: '6%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01],
			        axisLabel: {
			            formatter: '{value} 分',
			        }
			    },
			    yAxis: {
			    	inverse:'true',
			        type: 'category',
			        axisLabel: {
			            interval:0
			        },
			        data: namesS
			    },
			    series: [{
			            type: 'bar',
			            sort: 'descending',
			            data: sumS
			        },
			    ]
			};
			verScoreEvent.setOption(verScoreEventOption);
		</script>
	</body>
</html>
